<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="金西振">
    <title></title>
    <style>
        body {
            margin: 0;
            height: 1200px;
        }

        * {
            box-sizing: border-box;
        }

        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            width: 100%;
            height: 320px;
            margin: 50px auto;
            position: relative;
        }

        .img-list li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            width: 100%;
        }

        .img-list li img {
            width: 100%;
            height: 320px;
        }

        .img-list li.current {
            display: block;
        }

        .indicator {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 20px;
            display: flex;
            justify-content: center;
            color: white;
        }

        .indicator li {
            width: 20px;
            height: 20px;
            background-color: #aaa;
            text-align: center;
            line-height: 20px;
            margin: 0 5px;
            border-radius: 50%;
            cursor: pointer;
        }

        .indicator li.active {
            background-color: red;
        }

        .img-click span {
            width: 30px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: calc(50% - 20px);
            display: none;
        }

        .img-click span:hover {
            background-color: orange;
            cursor: pointer;
        }

        .img-click .prev {
            left: 0;
        }

        .img-click .next {
            right: 0;
        }


        .header {

            height: 50px;
            background-color: #10c55b;
            display: flex;
            justify-content: space-around;
        }

        .header .left ul {
            width: 450px;
            display: flex;
            justify-content: space-between;
            list-style: none;
            color: white;
            height: 60px;
            margin-top: -10px;
        }

        .header .left ul li {
            line-height: 60px;
        }

        .header .left ul li:nth-child(1) {
            width: 40px;

            background-color: #01ac48;
        }

        .header .right ul {
            width: 300px;
            display: flex;
            justify-content: space-between;
            list-style: none;
            color: white;
            height: 60px;
            margin-top: -10px;
        }

        .header .right ul li {
            line-height: 60px;
        }

        .na {
            width: 1000px;
            height: 100px;
            margin: 30px auto;
        }

        .na .no {
            width: 80px;
            height: 43px;
            border: none;
        }

        .na .on {
            border: none;
            width: 80px;
            height: 45px;
            background-image: url(111.png);
            position: relative;
            top: -5px;
        }

        .na input {
            width: 550px;
            height: 45px;
            border: none;
        }

        .na .sou {
            border: 1px solid #10c55b;
            width: 722px;
            height: 48px;
            position: relative;
            margin-left: 180px;
            margin-top: -70px;
            z-index: 9999;
        }

        .na img {
            position: relative;
            top: 10px;
        }

        .main {
            width: 1200px;
            /* background-color: rebeccapurple; */
            height: 1200px;
            margin: 0 auto;
            position: relative;
        }

        .main ul {
            list-style: none;
            width: 600px;
            display: flex;
            justify-content: space-between;
        }

        .main ul span {
            width: 30px;
            height: 30px;
            background-image: url(common.png);
            background-position: -127px -416px;
        }

        .main ul li {
            line-height: 30px;
        }

        .main ul .yi {
            font-size: 20px;
        }

        .main .geng {
            float: right;
            margin-top: -26px;
        }

        .main section {
            width: 290px;
            height: 200px;
            float: left;
            margin-left: 8px;
            background-color: red;
        }

        .main .a {
            width: 290px;
            height: 200px;
            background-color: darkcyan;
            border: 1px solid yellow;
            left: 8px;
            opacity: 0.5;
            position: absolute;
            top: 230px;
            display: none;
        }

        .main .b {
            width: 290px;
            height: 200px;
            background-color: darkcyan;
            border: 1px solid yellow;
            left: 307px;
            opacity: 0.5;
            position: absolute;
            top: 230px;
            display: none;
        }

        .main .c {
            width: 290px;
            height: 200px;
            background-color: darkcyan;
            border: 1px solid yellow;
            left: 604px;
            opacity: 0.5;
            position: absolute;
            top: 230px;
            display: none;
        }

        .main .d {
            width: 290px;
            height: 200px;
            background-color: darkcyan;
            border: 1px solid yellow;
            left: 903px;
            opacity: 0.5;
            position: absolute;
            top: 230px;
            display: none;
        }

        .main .zui {
            margin-top: 300px;
        }

        .main .zui div {
            float: left;
            margin-left: 8px;
        }

        .main .zui .aa {
            width: 290px;
            height: 390px;
            background-color: darkcyan;
            opacity: 0.5;
            left:100px;
             display: none;  
        }

        .main .zui .bb {
            width: 290px;
            height: 390px;
            background-color: darkcyan;
            opacity: 0.5;
             display: none;  
        }

        .main .zui .cc {
            width: 290px;
            height: 390px;
            background-color: darkcyan;
            opacity: 0.5;
             display: none;  
        }

        .main .zui .dd {
            width: 290px;
            height: 390px;
            background-color: darkcyan;
            opacity: 0.5;
             display: none;  
        }

        .ab {
            transition: all 0.5s linear;
        }

        .abb {
            transition: all 0.5s linear;
        }
        .qq{
            height: 320px;
            /* background-color: sandybrown; */
        }
        .ww{
            width: 1200px;
            height: 260px;
            /* background-color: slateblue; */
            margin: 0 auto;
            display: flex
        }
        .ee{
            width: 550px;
            height: 260px;
            display: flex;
            justify-content: space-between;
        }
        .rr ul{
            float: right;

        }
        .rr{
            width: 647px;
            height: 260px;
            float: right;
        }
   .tt{
       width: 1200px;
       height: 60px;
       border-top:1px solid #666666;
       margin: 0 auto;
   }
    </style>
</head>

<body>


    <div class="header">
        <div class="left">
            <ul>
                <li>首页</li>
                <li>所有分类</li>
                <li>设计创意</li>
                <li>办公创意</li>
                <li>...</li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li>vip中心</li>
                <li>请登录</li>
                <li>免费注册</li>
            </ul>
        </div>
    </div>
    <div class="na">
        <img src="11.png" alt="">
        <div class="sou">
            <button type="text" class="no">全站</button>
            <input type="text" name="" value="" placeholder="荣耀800像素立即开枪">
            <button type="text" class="on"></button>
            <span>热门搜索：  七夕 &nbsp; 详情页 &nbsp; icon &nbsp; 主图 &nbsp; 秋季&nbsp;  ppt模版 &nbsp; excle模版 &nbsp; 首页  &nbsp;个人简历 &nbsp; 装饰画   </span>
        </div>
    </div>



    <div class="box">
        <ul class="img-list">
            <li class="current"><a href="#"><img src="01.jpg" alt=""></a></li>
            <li><a href="#"><img src="02.jpg" alt=""></a></li>
            <li><a href="#"><img src="03.jpg" alt=""></a></li>
            <li><a href="#"><img src="04.jpg" alt=""></a></li>
            <li><a href="#"><img src="05.jpg" alt=""></a></li>
            <li><a href="#"><img src="06.jpg" alt=""></a></li>
            <li><a href="#"><img src="07.jpg" alt=""></a></li>
            <li><a href="#"><img src="08.jpg" alt=""></a></li>
        </ul>
        <ul class="indicator">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>

    </div>
    <div class="main">

        <ul>
            <span></span>
            <li class="yi">商用海报</li>
            <li>招聘海报</li>
            <li>配图海报</li>
            <li>企业文化</li>
            <li>促销海报</li>
            <li>原创插画</li>
        </ul>
        <span class="geng"> 更多》》</span>
        <section class="aaa"><img src="jxzt01.jpg" alt=""></section>
        <section class="aaa"><img src="jxzt02.jpg" alt=""></section>
        <section class="aaa"><img src="jxzt03.jpg" alt=""></section>
        <section class="aaa"><img src="jxzt04.jpg" alt=""></section>
        <div class="a ab">sdada</div>
        <div class="b ab">adssad</div>
        <div class="c ab">dadas</div>
        <div class="d ab">dadas</div>

        <div class="zui">
            <ul>
                <span></span>
                <li class="yi">商用海报</li>
                <li>招聘海报</li>
                <li>配图海报</li>
                <li>企业文化</li>
                <li>促销海报</li>
                <li>原创插画</li>
            </ul>
            <div class="abc"><img src="syhb01.jpg" alt=""></div>
            <div class="abc"><img src="syhb02.jpg" alt=""></div>
            <div class="abc"><img src="syhb03.jpg" alt=""></div>
            <div class="abc"><img src="syhb04.jpg" alt=""></div>
            <section class="aa abb"></section>
            <section class="bb abb"></section>
            <section class="cc abb"></section>
            <section class="dd abb"></section>
        </div>
    </div>
    <div class="qq">
        <div class="ww">
           <div class="ee">
                <ul>
                <h3>常见问题</h3>
                <li>常见问题</li>
                <li>常见问题</li>
                <li>常见问题</li>
                <li>常见问题</li>
                <li>常见问题</li>
                <li>常见问题</li>
            </ul>
              
              <ul>
                  <h3>关于千图网</h3>
                <li>关于我们</li>
                <li>媒体报道</li>
                <li>加入我们</li>
                <li>信息图</li>
                <li>每日更新</li>
            </ul>
            <ul>
                <h3>产品服务</h3>
                <li>官方微博</li>
                <li>帮助中心</li>
                <li>前途导航</li>
            </ul>
           
            <ul>
                <h3>友情链接</h3>
                <li>我退网</li>
                <li>千库网</li>
                <li>摄图网</li>
                <li>暴徒王</li>
                <li>石大旺</li>
                <li>更多》</li>
            </ul>
           
           </div>
        <div class="rr">
            <ul>
                <h2>客服咨询</h2>
                <h3> 400-998-7011 （9:00-18:00）</h3>
                <h3>feedback@58pic.com</h3>
            </ul>
        </div>
        </div>
        <div class="tt">
            <span>微博 &#x3000; 微信 &#x3000; 注册声明 &#x3000; 版权声明 &#x3000;  售后服务 &#x3000;    

注册声明 &#x3000; 版权声明 &#x3000; 售后服务 &#x3000;&#x3000;&#x3000;

Copyright ©2013-2017 千图网 沪ICP备10011451号-6上海工商 </span>    
        </div>

    </div>


</body>

</html>
<script>
    window.onload = function () {

        var box = document.querySelector('.box');
        var imgLis = document.querySelectorAll('.img-list li');
        var indicatorLis = document.querySelectorAll('.indicator li');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');

        var index = 0;

        function prevImg() {
            index = index == 0 ? index = imgLis.length - 1 : index - 1;
            showImg();
        }

        function nextImg() {
            index = index == imgLis.length - 1 ? 0 : index + 1;
            showImg();
        }

        function showImg() {
            for (var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = '';
                indicatorLis[i].className = '';
            }
            console.log(index);
            imgLis[index].className = 'current';
            indicatorLis[index].className = 'active';
        }


        var timer = setInterval(nextImg, 2000);


        for (var i = 0; i < indicatorLis.length; i++) {
            indicatorLis[i].index = i;
            indicatorLis[i].onmouseover = function () {

                clearInterval(timer);
                timer = null;

                index = this.index;
                showImg();
            }
            indicatorLis[i].onmouseout = function () {

                if (timer) return;

                timer = setInterval(nextImg, 2000);
            }
        }


        box.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        box.onmouseout = function () {
            if (timer) return;
            timer = setInterval(nextImg, 2000);
            prev.style.display = 'none';
            next.style.display = 'none';
        }

        prev.onclick = function () {
            prevImg();
        }

        next.onclick = function () {
            nextImg();
        }


    }
    var sou = document.querySelector('.sou')



    window.onscroll = function () {
        var scrollTop = document.scrollingElement.scrollTop
        if (scrollTop >= 210) {
            sou.style.position = 'fixed';

            sou.style.top = '60px';

        }
        if (scrollTop < 210) {

            sou.style.cssText = '';

        }
    }
    var divs = document.querySelectorAll('.aaa');
    var abs = document.querySelectorAll('.ab');
    for (var i = 0; i < divs.length; i++) {
        divs[i].index = i;
        // console.log(divs.length);
        divs[i].onmouseover = function () {
            abs[this.index].style.top = '30px';
            abs[this.index].style.display = 'block';
        }

        divs[i].onmouseout = function () {
            abs[this.index].style.top = '229px';
            abs[this.index].style.display = 'none';

        }
    }
    var divv = document.querySelectorAll('.abc');
    var abbs = document.querySelectorAll('.abb');
    for (var i = 0; i < divv.length; i++) {
        divv[i].index = i;
        divv[i].onmouseover = function () {
            console.log(this.index);
            abbs[this.index].style.top = '30px';
            // abbs[this.index].style.display = 'block';

        }

        divv[i].onmouseout = function () {
            abbs[this.index].style.top = '229px';
            abbs[this.index].style.display = 'none';

        }
    }

</script>